<template>
  <div class="step-container">
    <div class="step-title">1.请选择要使用的奖状模板</div>
    <div class="step-content">
      <div class="template-list">
        <ul>
          <li
            v-for="(template, i) in templates"
            :key="i"
            :class="{'on': generateData.templateIndex === i}"
            @click="generateData.templateIndex=i"
          >
            <div class="img-container">
              <img :src="imageDomain + template.path" alt>
            </div>
            <div class="template-name">{{template.name}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script src="./templateSelect.js"></script>
<style lang="less" src="./templateSelect.less"></style>